// SCSS混合宏定义

// 弹性布局混合宏
@mixin flex($direction: row, $justify: center, $align: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 绝对定位混合宏
@mixin absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 固定定位混合宏
@mixin fixed($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: fixed;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 渐变背景混合宏
@mixin gradient($direction: 135deg, $color1: #2b74ff, $color2: #589DFA) {
  background: linear-gradient($direction, $color1, $color2);
}

// 阴影混合宏
@mixin shadow($level: 'sm') {
  @if $level == 'sm' {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  } @else if $level == 'md' {
    box-shadow: 0px 4px 12px 0px rgba(21, 32, 49, 0.12);
  } @else if $level == 'lg' {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

// 过渡动画混合宏
@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
  transition: $property $duration $timing;
}

// 文本省略混合宏
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 响应式断点混合宏
@mixin responsive($breakpoint) {
  @if $breakpoint == 'mobile' {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == 'tablet' {
    @media (min-width: 769px) and (max-width: 1024px) { @content; }
  } @else if $breakpoint == 'desktop' {
    @media (min-width: 1025px) { @content; }
  }
}

// 按钮样式混合宏
@mixin button($bg-color: #2b74ff, $text-color: white, $border-radius: 6px) {
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: $border-radius;
  padding: 12px 24px;
  cursor: pointer;
  @include transition(all, 0.3s, ease);
  
  &:hover {
    opacity: 0.8;
    transform: translateY(-2px);
  }
}

// 卡片样式混合宏
@mixin card($bg-color: rgba(255, 255, 255, 0.9), $border-radius: 8px) {
  background: $bg-color;
  border-radius: $border-radius;
  @include shadow('md');
  padding: 16px;
}

// 输入框样式混合宏
@mixin input($border-color: #ddd, $focus-color: #2b74ff) {
  border: 1px solid $border-color;
  border-radius: 4px;
  padding: 8px 12px;
  @include transition(border-color, 0.3s, ease);
  
  &:focus {
    outline: none;
    border-color: $focus-color;
    box-shadow: 0 0 0 2px rgba($focus-color, 0.2);
  }
}
